<template>
	<view class="audio-box" :class="[`${theme}`]" v-if="audiolist.length > 0">
		<!-- 列表浮层 -->
		<template v-if="theme == 'theme1'">
			<!-- 背景图 -->
			<image class="foreground" mode="aspectFill" :src="themeBgUrl"></image>

			<view class="player">
				<view class="control">
					<image class="cover" :src="require('./static/control.png')"></image>
					<image class="btn play" :src="require('./static/play.png')" @click="operate"
						v-if="renderData('paused')"></image>
					<image class="btn pause" :src="require('./static/pause.png')" @click="operate" v-else></image>
				</view>
				<view class="info">
					<view class="name">{{ renderData('title') }}</view>
					<view class="singer">{{ renderData('singer') }}</view>
					<view class="time">{{ renderData('current') }}/{{ renderData('duration') }}</view>
				</view>

				<view class="menu">
					<image class="btn next" :src="require('./static/next.png')" @click="changeplay(1)"></image>
				</view>
			</view>
		</template>


		<template v-if="theme == 'theme2'">
			<view class="player">
				<view class="control">
					<image class="cover" :src="require('./static/control.png')"></image>
					<image class="btn play" :src="require('./static/play.png')" @click="operate"
						v-if="renderData('paused')"></image>
					<image class="btn pause" :src="require('./static/pause.png')" @click="operate" v-else></image>
				</view>
				<view class="info">
					<view class="name">{{ renderData('title') }}</view>
					<view class="singer">{{ renderData('singer') }}</view>
					<view class="time">{{ renderData('current') }}/{{ renderData('duration') }}</view>
				</view>

				<view class="menu">
					<image class="btn next" :src="require('./static/next.png')" @click="changeplay(1)"></image>
					<image class="btn playlist" :src="require('./static/playlist.png')"></image>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	export default {
		name: "zaudio",
		props: {
			theme: {
				type: String, // 主题 'theme1' or 'theme2'
				default: 'theme1'
			},
			themeColor: {
				type: String,
				default: '#42b983'
			},
			themeBgUrl: {
				type: String,
				default: null
			}
		},
		data() {
			return {
				playinfo: this.$zaudio.playinfo,
				audiolist: this.$zaudio.audiolist,
				paused: this.$zaudio.paused,
				renderIsPlay: this.$zaudio.renderIsPlay,
				audio: this.$zaudio.renderinfo,
				loading: this.$zaudio.loading,
				action: Symbol('zaudio')
			};
		},
		computed: {
			renderData() {
				return name => {
					if (!this.renderIsPlay) {
						if (name == 'paused') {
							return true;
						}

						return this.audio[name];
					} else {
						if (name == 'paused') {
							return this.paused;
						}

						return this.playinfo[name];
					}
				};
			}
		},

		mounted() {
			this.$nextTick(() => {
				let action = this.action;
				this.$zaudio.syncStateOn(action, ({
					audiolist,
					paused,
					playinfo,
					renderIsPlay,
					renderinfo,
					loading
				}) => {
					this.audiolist = audiolist;
					this.paused = paused;
					this.playinfo = playinfo;
					this.renderIsPlay = renderIsPlay;
					this.audio = renderinfo;
					this.loading = loading;
				});

			});
		},
		methods: {
			//播放or暂停
			operate() {
				this.$zaudio.operate();
			},
			//进度拖到
			change(event) {
				if (this.renderIsPlay) {
					this.$zaudio.seek(event.detail.value);
				}
			},
			//快进
			stepPlay(value) {
				this.$zaudio.stepPlay(value);
			},
			//切歌
			changeplay(count) {
				this.$zaudio.changeplay(count);
			}
		},
		beforeDestroy() {
			//组件卸载时卸载业务逻辑
			let action = this.action;
			this.$zaudio.syncStateOff(action)
		}
	};
</script>

<style scoped lang="scss">
	.audio-box {
		width: 100%;
		height: 300rpx;
		position: fixed;
		bottom: 0;
		background: linear-gradient(to top, #eeddce, transparent);

		.foreground {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0.8;
		}

		.player {
			position: relative;
			height: 158rpx;
			margin: 50rpx 25rpx;
			background-color: #FBF4EA;
			border: 3rpx solid #eeddce;
			border-radius: 18rpx;
			display: flex;
			align-items: center;

			// 控制 
			.control {
				margin-left: 15rpx;
				width: 118rpx;
				height: 118rpx;
				position: relative;

				.cover {
					border-radius: 88rpx;
					width: 100%;
					height: 100%;
				}

				.btn {
					position: absolute;
					width: 58rpx;
					height: 58rpx;
					color: #E3A037;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			// 条
			.info {
				margin: 0 20rpx;
				flex: 1;

				.name {
					color: #604827;
					font-size: 33rpx;
				}

				.singer {
					color: #E6B780;
					font-size: 25rpx;
				}

				.time {
					font-size: 20rpx;
				}
			}

			.menu {
				margin: 0 20rpx;

				.btn {
					width: 45rpx;
					height: 45rpx;
					margin: 20rpx;
				}
			}


		}
	}

	//  #ifdef MP-WEIXIN
	.theme3 .audio-slider {
		margin-top: -8px !important;
	}

	// #endif
</style>
